import {
  ElButton,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElSpace,
  ElSwitch
} from 'element-plus'
import { defineComponent } from 'vue'
import { VxeGrid } from 'vxe-table'

import type { IRolePageItem } from '@/apis'
import { usePageHeight } from '@/hooks'

import { RoleDialog } from './components'
import { useGrid } from './hooks'

export default defineComponent({
  setup() {
    const { gridExtHook, ...gridRestHook } = useGrid()
    const { pageHeightPx } = usePageHeight()

    return {
      gridRef: gridExtHook.gridRef,
      pageHeightPx,
      ...gridRestHook
    }
  },
  render() {
    return (
      <div
        style={{
          height: this.pageHeightPx
        }}
      >
        <VxeGrid ref={(e: any) => (this.gridRef = e)} {...this.gridConfig}>
          {{
            toolbar_buttons: () => (
              <ElSpace>
                <ElButton
                  v-permission="'system:role:add'"
                  type="primary"
                  plain
                  onClick={() => this.handleShowAdd()}
                >
                  新增
                </ElButton>
                <ElButton
                  v-permission="'system:role:remove'"
                  type="danger"
                  plain
                  disabled={this.selectedIds.size === 0}
                  onClick={this.handleDeleteList}
                >
                  删除
                </ElButton>
                <ElButton
                  v-permission="'system:role:export'"
                  type="primary"
                  plain
                  disabled={!this.canExport}
                  onClick={this.handleExport}
                >
                  导出
                </ElButton>
              </ElSpace>
            ),
            columns_status: ({ row }: { row: IRolePageItem }) => (
              <ElSwitch
                v-model={row.status}
                activeValue="0"
                inactiveValue="1"
                onChange={() => this.handleToggleStatus(row)}
              />
            ),
            columns_operation: ({ row }: { row: IRolePageItem }) =>
              row.id !== '1' ? (
                <ElSpace>
                  <ElButton
                    v-permission="'system:role:edit'"
                    type="primary"
                    size="small"
                    link
                    onClick={() => this.handleShowEdit(row)}
                  >
                    修改
                  </ElButton>
                  <ElButton
                    v-permission="'system:role:remove'"
                    type="danger"
                    size="small"
                    link
                    onClick={() => this.handleDelete(row.id)}
                  >
                    删除
                  </ElButton>
                  <ElDropdown>
                    {{
                      default: () => (
                        <ElButton type="primary" size="small" link>
                          更多
                        </ElButton>
                      ),
                      dropdown: () => (
                        <ElDropdownMenu>
                          <ElDropdownItem>
                            <ElButton
                              type="primary"
                              size="small"
                              link
                              onClick={() => this.handleAuthUser(row.id)}
                            >
                              分配用户
                            </ElButton>
                          </ElDropdownItem>
                        </ElDropdownMenu>
                      )
                    }}
                  </ElDropdown>
                </ElSpace>
              ) : null
          }}
        </VxeGrid>
        {/* 新增/编辑操作 */}
        <RoleDialog
          ref={(e: any) => (this.roleDialogRef = e)}
          statusOptions={this.statusOptions}
          onSuccess={this.handleRefresh}
        />
      </div>
    )
  }
})
